<template>
  <div class="main">
    <div class="left">
      <studentMainleft></studentMainleft>
    </div>
    <div class="rmain">
      <div class="right">
        <div class="downloadexcel">
          <!--导出用户信息excel表格-->
          <download-excel
            class="export-excel-wrapper"
            :data="json_data"
            :fields="json_fields"
            name="用户信息列表.xls"
          >
            没有模板？点击此下载
            <el-link type="primary" style="font-size: 18px;">学生信息模板</el-link>
          </download-excel>
        </div>
        <div class="uploadexcel">
          <vue-xlsx-table @on-select-file="handleSelectedFile">上传学生信息</vue-xlsx-table>
        </div>
      </div>
      <div class="right1">
        <template>
          <el-table :data="stuInfo" style="width: 100%" @cell-dblclick="cellClick">
            <!-- <template v-for="(item,index) in header">
              <el-table-column :key="index" :prop="item" width="156" :label="item">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.item"
                    v-if="scope.row.seen == true"
                    @blur="loseFcous(scope.$index, scope.row.item)"
                  ></el-input>

                  <span style="margin-left: 10px" v-else>{{ scope.row.item }}</span>
                </template>
              </el-table-column>
            </template>-->
            <el-table-column width="156" label="学生姓名">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.学生姓名"
                  v-if="scope.row.seen == true"
                  @blur="loseFcous(scope.$index, scope.row)"
                ></el-input>

                <span style="margin-left: 10px" v-else>{{ scope.row.学生姓名 }}</span>
              </template>
            </el-table-column>
            <el-table-column width="156" label="学生年龄">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.学生姓名"
                  v-if="scope.row.seen == true"
                  @blur="loseFcous(scope.$index, scope.row)"
                ></el-input>

                <span style="margin-left: 10px" v-else>{{ scope.row.学生姓名 }}</span>
              </template>
            </el-table-column>
            <el-table-column  width="156" label="学生性别">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.学生性别"
                  v-if="scope.row.seen == true"
                  @blur="loseFcous(scope.$index, scope.row)"
                ></el-input>

                <span style="margin-left: 10px" v-else>{{ scope.row.学生性别 }}</span>
              </template>
            </el-table-column>
            <el-table-column  width="156" label="学生电话">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.学生电话"
                  v-if="scope.row.seen == true"
                  @blur="loseFcous(scope.$index, scope.row)"
                ></el-input>

                <span style="margin-left: 10px" v-else>{{ scope.row.学生电话 }}</span>
              </template>
            </el-table-column>
            <el-table-column width="156" label="学生电子邮件">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.学生电子邮件"
                  v-if="scope.row.seen == true"
                  @blur="loseFcous(scope.$index, scope.row)"
                ></el-input>

                <span style="margin-left: 10px" v-else>{{ scope.row.学生电子邮件 }}</span>
              </template>
            </el-table-column>
            <el-table-column  width="156" label="学生身份证">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.学生身份证"
                  v-if="scope.row.seen == true"
                  @blur="loseFcous(scope.$index, scope.row)"
                ></el-input>

                <span style="margin-left: 10px" v-else>{{ scope.row.学生身份证 }}</span>
              </template>
            </el-table-column>
            <el-table-column  width="156" label="班级">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.班级"
                  v-if="scope.row.seen == true"
                  @blur="loseFcous(scope.$index, scope.row)"
                ></el-input>

                <span style="margin-left: 10px" v-else>{{ scope.row.班级 }}</span>
              </template>
            </el-table-column>
            <el-table-column  width="156" label="入学时间">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.入学时间"
                  v-if="scope.row.seen == true"
                  @blur="loseFcous(scope.$index, scope.row)"
                ></el-input>

                <span style="margin-left: 10px" v-else>{{ scope.row.入学时间 }}</span>
              </template>
            </el-table-column>
            <el-table-column  width="156" label="政治面貌">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.政治面貌"
                  v-if="scope.row.seen == true"
                  @blur="loseFcous(scope.$index, scope.row)"
                ></el-input>

                <span style="margin-left: 10px" v-else>{{ scope.row.政治面貌 }}</span>
              </template>
            </el-table-column>
            <el-table-column  width="156" label="常住地">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.常住地"
                  v-if="scope.row.seen == true"
                  @blur="loseFcous(scope.$index, scope.row)"
                ></el-input>

                <span style="margin-left: 10px" v-else>{{ scope.row.常住地 }}</span>
              </template>
            </el-table-column>
            <el-table-column  width="156" label="民族">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.民族"
                  v-if="scope.row.seen == true"
                  @blur="loseFcous(scope.$index, scope.row)"
                ></el-input>

                <span style="margin-left: 10px" v-else>{{ scope.row.民族 }}</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import studentMainleft from "@/components/studentMainleft";
export default {
  components: {
    studentMainleft
  },
  data() {
    return {
      //导出excel
      json_fields: {
        学生姓名: "StuName",
        学生年龄: "StuAge",
        学生性别: "StuSex",
        学生电话: "StuPhone",
        学生电子邮件: "StuEmail",
        学生身份证: "StuCarid",
        班级: "ClassId",
        入学时间: "StubackTime",
        政治面貌: "PoliticalLandscape",
        常住地: "NativePlace",
        民族: "National",
        seen: "seen"
      },
      json_data: [
        {
          seen: false
        }
      ],
      json_meta: [
        [
          {
            " key ": " charset ",
            " value ": " utf- 8 "
          }
        ]
      ],
      stuInfo: [],
      header: []
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleSelectedFile(convertedData) {
      this.stuInfo = convertedData.body;
      this.header = convertedData.header;
    },
    cellClick(row, column) {
      row.seen = true;
    },
    loseFcous(index, row) {
      row.seen = false;
    }
  }
};
</script>

<style scoped>
.main {
  display: flex;
  height: 100%;
}
.rmain {
  width: 100%;
  height: 100%;
}
.right {
  width: 100%;
  background-color: white;
  height: 7%;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.right1 {
  width: 100%;
  background-color: white;
  height: 75%;
  margin-left: 10px;
}
.right .downloadexcel {
  padding: 20px;
  text-align: left;
  display: flex;
}
.right .uploadexcel {
  padding: 20px;
}
.right .uploadexcel .xlsx-button {
  font-size: 15px !important;
}
</style>
